<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css" media="screen">@import "jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">@import "themes/jqt/theme.css";</style>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript"   src="jquery/jquery-1.4.4.js"></script>
<script type="text/javascript"   src="jquery/jquery.customdata.js"></script>
<script type="text/javascript"   src="jquery/jquery.dataset.js"></script>
<script type="text/javascript"   src="jquery/jquery.i18n.js"></script>
<script type="text/javascript"   src="js/i18nApplication.js"></script>
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var bounds;


  var arrayDeptMarkers=[];
  var arrayArrMarkers=[];
var marv;

 /**********************************************************
  **************************************FUNCTION INITIALIZER
  **/
 $(function(){
    /*init geocoding service*/
    geocoder = new google.maps.Geocoder();

        /*Init gmap*/
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    bounds= new google.maps.LatLngBounds();
    
    /*bind btn evt for coding address*/
    $("#ity input[type=button]").bind("click", function(event) {
            processAddress(event);} );

    /*
     *i18n Internazionalization: init dictionary based on language
     **/
    initI18nEngine('EN');


    /*JQT INIT********************/
    var jQT = new $.jQTouch({
            addGlossToIcon: false,
            statusBar: 'black'

        });

  });

  function fitsMarkersOnMap(){
     bounds= new google.maps.LatLngBounds();
     for(i in arrayDeptMarkers){
       bounds.extend(arrayDeptMarkers[i].position);
     }
     for(i in arrayArrMarkers){
        bounds.extend(arrayArrMarkers[i].position);
     }
     map.fitBounds(bounds);
  }

   function codeAddress(add, addrType) {
  
    geocoder.geocode( { 'address': add}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        
          var divShow;

          if(addrType=='dept'){
            /*unbind dei markers*/
            for (i in arrayDeptMarkers) {
               arrayDeptMarkers[i].setMap(null);
            }
            arrayDeptMarkers=[];

              /*select div for showing links*/
              divId= $('#ity_dept_show');
              divId.empty();
          }else{
                for (i in arrayArrMarkers) {
                   arrayArrMarkers[i].setMap(null);             
                }
               arrayArrMarkers=[];
               /*select div for showing links*/
              divId= $('#ity_arr_show');
              divId.empty();
          }
          var ul= $('<ul></ul>');

          for(i=0;i<results.length;i++){
            /*salvo i markers per poterli togliere dalla mappa successivamnte*/

              var marker = new google.maps.Marker({
                  position:results[i].geometry.location
                  });

              if(addrType=='dept' ){
                  arrayDeptMarkers.push(marker);
              }else if(addrType=='arr'){
                  arrayArrMarkers.push(marker);
              }


              /*per ogni localizzazione*/
              var link= $('<a></a>',{href:'#'}).append(results[i].formatted_address);
              link.data('position', marker.position);

              link.bind('click', function(event){
                     
                      var position= $(event.target).data('position');
                      var containerId= $(event.target).closest('div').attr('id');
                      var arrayMark=[]
                      var infoIty="";
                      if(containerId=='ity_dept_show'){
                         arrayMark=  arrayDeptMarkers;
                         infoIty="Departure";
                      }else if(containerId=='ity_arr_show'){
                         arrayMark=  arrayArrMarkers;
                          infoIty="Arrival";
                      }
                      for (i in arrayMark) {
                          if(arrayMark[i].position.lat()==position.lat() && arrayMark[i].position.lng()==position.lng()){
                              arrayMark[i].setMap(map);
                              map.center=position;
                              /*add event onclick to marker*/
                                                   
                              var infowindow = new google.maps.InfoWindow({
                                  content: ''
                              });

                              arrayMark[i].info='<div style="width:240px">'+infoIty+': </br>'+$(event.target).text()+'</div>';
                              google.maps.event.addListener(arrayMark[i], 'click', function() {

                                infowindow.open(map,this);
                                infowindow.setContent(this.info);                                
                            });
                              
                          }else{
                             arrayMark[i].setMap(null);
                          }
                      }
                      /*set map bounds*/
                      fitsMarkersOnMap();

               });

              var li= $('<li></li>').append(link);
              $( ul).append(li);           
          }

          $(divId).append(ul);
         

      }else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
   
  }

/*search address, display marks on map*/
function processAddress(firedEvent){
    var btName= $(firedEvent.target).attr("name");
    var addrType="";
    if (btName.indexOf("dept", 0)!=-1 ){
            addrType="dept";
    }else if(btName.indexOf("arr", 0)!=-1){
            addrType="arr";
    }

    var addressInput= $('input[type="text"][name$="'+btName.concat("_val")+'"]');

   codeAddress($(addressInput).val(), addrType);  
   
}

</script>
</head>
<body >
<div id="jqt">
  <div id="ity" style="float:left;">
        <div>
          <input data-i18n="ity_dept_val" placeholder="Departure" name="ity_dept_val" type="text">
          <input data-i18n="ity_dept" name="ity_dept" type="button" value="search" >
        </div>
        <div  data-i18n="ity_dept_show" id="ity_dept_show" style="border: 1px solid green;">addresses</div>
        <div>
                <input data-i18n="ity_arr_val" placeholder="Arrival" name="ity_arr_val" type="text">
                <input data-i18n="ity_arr" name="ity_arr" type="button" value="search" >
        </div>
        <div data-i18n="ity_arr_show" id="ity_arr_show" style="width:400px; border: 1px solid rosybrown;">addresses</div>
  </div>
  <div id="map_canvas" style="width:400px; height:400px; float:left;"></div>
</div>
</body>
</html>